<template>
	<el-container>
		<el-header height="100%" class="condition_wrap">
			<el-row v-if="hideSearchOption" style="margin-bottom: 0">
				<el-col :span="4">
					<span class="condition_name">学生ID：</span>
				</el-col>
				<el-col :span="idInputInfo.span">
					<el-input type="number" min="0" v-model="searchForm.startId"
						:placeholder="idInputInfo.placeholder"></el-input>
				</el-col>
				<el-col v-show="idRangeSelect" :span="1" style="text-align: center">
					<span>-</span>
				</el-col>
				<el-col v-show="idRangeSelect" :span="3">
					<el-input type="number" min="0" v-model="searchForm.endId" placeholder="终止ID"></el-input>
				</el-col>
				<el-col :span="2">
					<el-button style="font-size: 15px" type="text" @click="idRangeSelect = !idRangeSelect">
						{{ idRangeSelect ? " 精准检索" : "范围检索" }}
					</el-button>
				</el-col>
				<el-col :span="4">
					<span class="condition_name">学生姓名：</span>
				</el-col>
				<el-col :span="7">
					<el-input v-model="searchForm.name" placeholder="输入学生姓名以检索"></el-input>
				</el-col>
				<el-col :span="4">
					<el-button size="medium" @click="resetSearchForm">重置</el-button>
					<el-button size="medium" style="font-size: 16px" type="text"
						@click="hideSearchOption = !hideSearchOption">
						{{ hideSearchOption ? "展开" : "收起" }}<i
							:class="{ 'el-icon-arrow-down': hideSearchOption, 'el-icon-arrow-up': !hideSearchOption }"></i>
					</el-button>
				</el-col>
			</el-row>
			<el-row v-else>
				<el-col :span="3">
					<span class="condition_name">学生ID：</span>
				</el-col>
				<el-col :span="idInputInfo.span">
					<el-input type="number" min="0" v-model="searchForm.startId"
						:placeholder="idInputInfo.placeholder"></el-input>
				</el-col>
				<el-col v-show="idRangeSelect" :span="1" style="text-align: center">
					<span>-</span>
				</el-col>
				<el-col v-show="idRangeSelect" :span="3">
					<el-input type="number" min="0" v-model="searchForm.endId" placeholder="终止ID"></el-input>
				</el-col>
				<el-col :span="2">
					<el-button style="font-size: 15px" type="text" @click="idRangeSelect = !idRangeSelect">
						{{ idRangeSelect ? " 精准检索" : "范围检索" }}
					</el-button>
				</el-col>
				<el-col :span="3">
					<span class="condition_name">性别：</span>
				</el-col>
				<el-col :span="4" style="text-align: left">
					<el-select v-model="searchForm.sex">
						<el-option v-for="item in sexSelectList" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="3">
					<span class="condition_name">学生姓名：</span>
				</el-col>
				<el-col :span="9">
					<el-input v-model="searchForm.name" placeholder="输入学生姓名以检索"></el-input>
				</el-col>
			</el-row>
			<el-row v-show="!hideSearchOption">
				<el-col :span="3">
					<span class="condition_name">生日：</span>
				</el-col>
				<el-col :span="birthdayInputInfo.span">
					<el-date-picker v-model="searchForm.startBirthday" :placeholder="birthdayInputInfo.placeholder"
						style="width: 100%" type="date" value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-col>
				<el-col v-show="birthdayRangeSelect" :span="1" style="text-align: center">
					<span>-</span>
				</el-col>
				<el-col v-show="birthdayRangeSelect" :span="3">
					<el-date-picker v-model="searchForm.endBirthday" placeholder="结束日期" style="width: 100%" type="date"
						value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-col>
				<el-col :span="2">
					<el-button style="font-size: 15px" type="text" @click="birthdayRangeSelect = !birthdayRangeSelect">
						{{ birthdayRangeSelect ? " 精准检索" : "范围检索" }}
					</el-button>
				</el-col>
				<el-col :span="3">
					<span class="condition_name">省份：</span>
				</el-col>
				<el-col :span="4" style="text-align: left">
					<el-select v-model="searchForm.province" filterable>
						<el-option v-for="item in provinceSelectList" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="3">
					<span class="condition_name">身高：</span>
				</el-col>
				<el-col :span="heightInputInfo.span">
					<el-input type="number" min="0" v-model.number="searchForm.startHeight"
						:placeholder="heightInputInfo.placeholder"></el-input>
				</el-col>
				<el-col v-show="heightRangeSelect" :span="1" style="text-align: center">
					<span>-</span>
				</el-col>
				<el-col v-show="heightRangeSelect" :span="3">
					<el-input type="number" min="0" v-model.number="searchForm.endHeight" placeholder="最大身高"></el-input>
				</el-col>
				<el-col :span="2">
					<el-button style="font-size: 15px" type="text" @click="heightRangeSelect = !heightRangeSelect">
						{{ heightRangeSelect ? " 精准检索" : "范围检索" }}
					</el-button>
				</el-col>
			</el-row>
			<el-row v-show="!hideSearchOption" style="margin-bottom: 0">
				<el-col :span="3">
					<span class="condition_name">年龄：</span>
				</el-col>
				<el-col :span="ageInputInfo.span">
					<el-input type="number" min="0" v-model.number="searchForm.startAge"
						:placeholder="ageInputInfo.placeholder"></el-input>
				</el-col>
				<el-col v-show="ageRangeSelect" :span="1" style="text-align: center">
					<span>-</span>
				</el-col>
				<el-col v-show="ageRangeSelect" :span="3">
					<el-input type="number" min="0" v-model.number="searchForm.endAge" placeholder="最大年龄"></el-input>
				</el-col>
				<el-col :span="2">
					<el-button style="font-size: 15px" type="text" @click="ageRangeSelect = !ageRangeSelect">
						{{ ageRangeSelect ? " 精准检索" : "范围检索" }}
					</el-button>
				</el-col>
				<el-col :span="3">
					<span class="condition_name">学历：</span>
				</el-col>
				<el-col :span="4" style="text-align: left">
					<el-select v-model="searchForm.education">
						<el-option v-for="item in educationSelectList" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="12">
					<el-button size="medium" @click="resetSearchForm">重置</el-button>
					<el-button size="medium" style="font-size: 16px" type="text"
						@click="hideSearchOption = !hideSearchOption">
						{{ hideSearchOption ? "展开" : "收起" }}<i
							:class="{ 'el-icon-arrow-down': hideSearchOption, 'el-icon-arrow-up': !hideSearchOption }"></i>
					</el-button>
				</el-col>
			</el-row>
		</el-header>
		<el-main :height="tableWrapHeight" class="table_wrap">
			<el-row :gutter="20" style="margin: 0; padding: 20px 0; width: 100%; display: flex; align-items: center">
				<el-col :span="5" style="text-align: left;">
					<span class="table_title">学生数据列表</span>
				</el-col>
				<el-col :offset="16" :span="3">
					<el-dropdown @command="handleCommand">
						<el-button icon="el-icon-plus" type="primary">添加学生数据</el-button>
						<el-dropdown-menu v-slot:default="dropdown">
							<el-dropdown-item command="addOne">添加单条</el-dropdown-item>
							<el-dropdown-item command="upload">从excel导入</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-col>
				<el-col :span="2" style="padding: 0;">
					<el-button :loading="loading" icon="el-icon-refresh" type="primary" @click="refresh">刷新</el-button>
				</el-col>
			</el-row>
			<div>
				<el-table v-loading="loading" :data="tableData" :height="tableHeight" class="student_table" :header-cell-style="{ 'background-color': '#477f5810', 'text-align': 'center'}" :cell-style="{'text-align':'center'}">
					<el-table-column label="序号" width="140">
						<template v-slot:default="scope">
							<i class="blq-icon-student" style="font-size: 20px"></i>
							<span style="margin-left: 10px">{{ scope.row.index }}</span>
						</template>
					</el-table-column>
					<el-table-column label="学生ID" width="140">
						<template v-slot:default="scope">
							<span style="margin-left: 10px">{{ scope.row.id }}</span>
						</template>
					</el-table-column>
					<el-table-column label="姓名" width="140">
						<template v-slot:default="scope">
							<span style="margin-left: 10px">{{ scope.row.name }}</span>
						</template>
					</el-table-column>
					<el-table-column label="性别" width="120">
						<template v-slot:default="scope">
							<span v-if="scope.row.sex === 0" style="margin-left: 10px">男</span>
							<span v-else style="margin-left: 10px">女</span>
						</template>
					</el-table-column>
					<el-table-column label="省份" width="240">
						<template v-slot:default="scope">
							<span style="margin-left: 10px">{{ getProvinceName(scope.row.province) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="生日" width="220">
						<template v-slot:default="scope">
							<span style="margin-left: 10px">{{ scope.row.birthday }}</span>
						</template>
					</el-table-column>
					<el-table-column label="身高" width="140">
						<template v-slot:default="scope">
							<span style="margin-left: 10px">{{ scope.row.height }}</span>
						</template>
					</el-table-column>
					<el-table-column label="学历" width="180">
						<template v-slot:default="scope">
							<span v-if="scope.row.education === 0" style="margin-left: 10px">本科生</span>
							<span v-else-if="scope.row.education === 1" style="margin-left: 10px">研究生</span>
							<span v-else style="margin-left: 10px">博士生</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template v-slot:default="scope">
							<el-button size="medium" @click="handleEdit(scope.row)">编辑
							</el-button>
							<el-button size="medium" type="danger" @click="open(scope.row)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
					:total="total" layout="total, sizes, prev, pager, next, jumper" style="float: right"
					@size-change="handleSizeChange" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</el-main>
		<student-add-form ref="studentAddForm" @success-add="requireData"></student-add-form>
		<excel-up-loader ref="excelUpLoader" @success-upload="requireData"></excel-up-loader>
		<student-edit-form ref="studentEditForm" @success-update="requireData"></student-edit-form>
	</el-container>
</template>

<script>
import studentAddForm from "@/components/student/student-add.vue";
import excelUpLoader from "@/components/student/excel-upload.vue";
import studentEditForm from "@/components/student/student-edit.vue";
import { getNameByRegionCode } from "@/utils/map/regionCodes";

export default {
	computed: {
		sexSelectList() {
			return [{ label: "全部", value: "" }].concat(studentAddForm.data().sexSelectList)
		},
		provinceSelectList() {
			return [{ label: "全部", value: "" }].concat(studentAddForm.computed.provinceSelectList())
		},
		educationSelectList() {
			return [{ label: "全部", value: "" }].concat(studentAddForm.data().educationSelectList)
		},
		tableWrapHeight() {
			return this.hideSearchOption ? 810 : 690;
		},
		tableHeight() {
			return this.hideSearchOption ? 695 : 575;
		},
		idInputInfo() {
			return {
				span: this.idRangeSelect ? 3 : 7,
				placeholder: this.idRangeSelect ? "起始ID" : "输入ID以检索"
			};
		},
		birthdayInputInfo() {
			return {
				span: this.birthdayRangeSelect ? 3 : 7,
				placeholder: this.birthdayRangeSelect ? "开始日期" : "输入日期以检索"
			};
		},
		heightInputInfo() {
			return {
				span: this.heightRangeSelect ? 3 : 7,
				placeholder: this.heightRangeSelect ? "最小身高" : "输入身高以检索"
			};
		},
		ageInputInfo() {
			return {
				span: this.ageRangeSelect ? 3 : 7,
				placeholder: this.ageRangeSelect ? "最小年龄" : "输入年龄以检索"
			};
		},
		idSearchOption() {
			if (this.idRangeSelect) {
				if (this.searchForm.startId === "" && this.searchForm.endId === "") {
					return "";
				} else {
					return "&id=" + this.searchForm.startId + "," + this.searchForm.endId;
				}
			}
			else {
				return this.searchForm.startId === "" ? "" : "&id=" + this.searchForm.startId;
			}
		},
		birthdaySearchOption() {
			if (this.birthdayRangeSelect) {
				if (this.searchForm.startBirthday === "" && this.searchForm.endBirthday === "") {
					return "";
				} else {
					return "&birthday=" + this.searchForm.startBirthday + "," + this.searchForm.endBirthday;
				}
			} else {
				return this.searchForm.startBirthday === "" ? "" : "&birthday=" + this.searchForm.startBirthday;
			}
		},
		heightSearchOption() {
			if (this.heightRangeSelect) {
				if (this.searchForm.startHeight === "" && this.searchForm.endHeight === "") {
					return "";
				} else {
					return "&height=" + this.searchForm.startHeight + "," + this.searchForm.endHeight;
				}
			} else {
				return this.searchForm.startHeight === "" ? "" : "&height=" + this.searchForm.startHeight;
			}
		},
		ageSearchOption() {
			if (this.ageRangeSelect) {
				if (this.searchForm.startAge === "" && this.searchForm.endAge === "") {
					return "";
				} else {
					return "&age=" + this.searchForm.startAge + "," + this.searchForm.endAge;
				}
			} else {
				return this.searchForm.startAge === "" ? "" : "&age=" + this.searchForm.startAge;
			}
		},
		nameSearchOption() {
			return this.searchForm.name === "" ? "" : "&name=" + this.searchForm.name;
		},
		sexSearchOption() {
			return this.searchForm.sex === "" ? "" : "&sex=" + this.searchForm.sex;
		},
		provinceSearchOption() {
			return this.searchForm.province === "" ? "" : "&province=" + this.searchForm.province;
		},
		educationSearchOption() {
			return this.searchForm.education === "" ? "" : "&education=" + this.searchForm.education;
		},
		searchOption() {
			let option = `/api/student/list?page=${this.currentPage}&size=${this.pageSize}`;
			option += this.idSearchOption;
			option += this.birthdaySearchOption;
			option += this.heightSearchOption;
			option += this.ageSearchOption;
			option += this.nameSearchOption;
			option += this.sexSearchOption;
			option += this.provinceSearchOption;
			option += this.educationSearchOption;
			return option;
		}
	},
	components: { studentAddForm, excelUpLoader, studentEditForm },
	data() {
		return {
			loading: true,
			tableData: [],
			currentPage: 1,
			pageSize: 10,
			total: 0,
			hideSearchOption: true,
			searchForm: {
				startId: "",
				endId: "",
				name: "",
				sex: "",
				province: "",
				startBirthday: "",
				endBirthday: "",
				startHeight: "",
				endHeight: "",
				education: "",
				startAge: "",
				endAge: "",
			},
			idRangeSelect: false,
			birthdayRangeSelect: false,
			heightRangeSelect: false,
			ageRangeSelect: false,
		}
	},
	methods: {
		resetSearchForm() {
			for (let key in this.searchForm) {
				this.searchForm[key] = "";
			}
			this.currentPage = 1;
		},
		requireData() {
			this.loading = true;
			this.$axios.get(this.searchOption).then(res => {
				if (res.code === 0) {
					this.tableData = res.data.list.map((item, index) => {
						return {
							index: index + 1,
							...item
						}
					});
					this.total = res.data.total;
				}
			}).catch(err => {
				this.$message.error("获取数据失败");
			}).finally(() => {
				this.loading = false;
			});
		},
		getProvinceName(adcode) {
			return getNameByRegionCode(adcode.toString());
		},
		handleCommand(command) {
			if (command === "addOne") {
				this.$refs.studentAddForm.showAddStudentForm();
			} else if (command === "upload") {
				this.$refs.excelUpLoader.showExcelUploader();
			}
		},
		handleEdit(row) {
			this.$refs.studentEditForm.showEditStudentForm(row);
		},
		handleDelete(row) {
			this.$axios.delete(`/api/student/${row.id}`).then(res => {
				this.$message.success("删除成功");
				this.requireData();
			}).catch(err => {
				this.$message.error("删除失败");
			});
			this.requireData()
		},
		handleSizeChange(val) {
			this.pageSize = val;
			this.requireData();
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.requireData();
		},
		refresh() {
			this.requireData();
			if (this.tableData !== null) {
				this.$message.success("获取数据成功");
			}
		},
		open(row) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.handleDelete(row)
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
	},
	mounted() {
		this.requireData();
	},
	watch: {
		searchForm: {
			handler: function () {
				this.currentPage = 1;
				this.requireData();
			},
			deep: true
		},
		idRangeSelect: function () {
			this.currentPage = 1;
			this.requireData();
		},
		birthdayRangeSelect: function () {
			this.currentPage = 1;
			this.requireData();
		},
		heightRangeSelect: function () {
			this.currentPage = 1;
			this.requireData();
		},
		ageRangeSelect: function () {
			this.currentPage = 1;
			this.requireData();
		}
	}
}
</script>

<style lang="scss" scoped>
.el-row {
	margin-bottom: 20px;
	align-items: center;
	display: flex;
	color: #606266;
	width: 100%;
	text-align: right
}

.condition_wrap {
	border-radius: 4px;
	background-color: #477f5810;
	margin: 16px 0 0 0;
	padding: 20px 50px 20px 10px;

	.condition_name {
		font-size: 20px;
		color: #005b30;
	}
}

.table_wrap {
	// height: 810px;
	padding: 0;
}

.table_title {
	font-size: 24px;
	font-weight: 600;
	color: #005b30;
}

.student_table {
	width: 100%;
	border-style: solid;
	border-color: #005b30;
	border-width: 3px;
	border-radius: 4px;
	padding: 4px 8px;

	font-size: 20px;
}
</style>